<template>
  <div class="user-info">
    <eagle-sing-diy  ref="setzIndex" :isContinue="false" :mzIndex="this.zIndex" v-on:FilePathClick="FilePathClick"></eagle-sing-diy>
    <!-- <img class="imgCanvas" :src="imgUrl"> -->
    <van-field class="input_text" style="margin-bottom: 5px" name="uploader">
      <template #input>
        <div style="padding-right: 20px" class="input_text">编制人签名</div>
        <div
          class="color-blue"
          @click="AddCertificate('MarkSignAttach')"
          v-if="!imgUrl"
        >
          点击签字
        </div>
        <van-image
         @click="preview(baseUrl + imgUrl)"
          class="imgCanvas"
          :src="baseUrl + imgUrl"
          v-if="imgUrl"
        />
        <div
        class="ml-10 color-blue"
          @click="empty('MarkSignAttach')"
          v-if="imgUrl"
        >
          删除
        </div>
        <!-- <van-uploader
          v-model="imgUrl"
          :max-count="1"
          :after-read="beforeRead"
          :before-delete="beforedelete"
        /> -->
      </template>
    </van-field>

    <van-field class="input_text" style="margin-bottom: 5px" name="uploader">
      <template #input>
        <div style="padding-right: 20px" class="input_text">审核人签名</div>
        <div
          class="color-blue"
          @click="AddCertificate('AuditSignAttach')"
          v-if="!imgUrl2"
        >
          点击签字
        </div>
        <van-image
        @click="preview(baseUrl + imgUrl2)"
          class="imgCanvas"
          :src="baseUrl + imgUrl2"
          v-if="imgUrl2"
        />
        <div
         class="ml-10 color-blue"
          style="color: #1989fa"
          @click="empty('AuditSignAttach')"
          v-if="imgUrl2"
        >
          删除
        </div>
        <!-- <van-uploader
          v-model="imgUrl"
          :max-count="1"
          :after-read="beforeRead"
          :before-delete="beforedelete"
        /> -->
      </template>
    </van-field>

    <van-field class="input_text" style="margin-bottom: 5px" name="uploader">
      <template #input>
        <div style="padding-right: 20px" class="input_text">批准人签名</div>
        <div
          class="color-blue"
          @click="AddCertificate('ApproveSignAttach')"
          v-if="!imgUrl3"
        >
          点击签字
        </div>
        <van-image
        @click="preview(baseUrl + imgUrl3)"
          class="imgCanvas"
          :src="baseUrl + imgUrl3"
          v-if="imgUrl3"
        />
        <div
         class="ml-10 color-blue"
          style="color: #1989fa"
          @click="empty('ApproveSignAttach')"
          v-if="imgUrl3"
        >
          删除
        </div>
      </template>
    </van-field>

    <van-field class="input_text">
      <template #input>
        <van-button
          class="br-5"
          block
          type="primary"
          @click="onSubmit(false)"
          style="margin-right: 5px"
          >保存</van-button
        >
        <van-button
          class="br-5"
          block
          type="info"
          @click="onSubmit(true)"
          style="margin-left: 5px"
          >提交</van-button
        >
      </template>
    </van-field>
    <van-overlay :show="showImg" >
      <div class="imageShow" @click="showImg = false">
        <van-image width="100%" :src="imagePath" />
      </div>
    </van-overlay>
  </div>
</template>
<script>
import { CommonAttachUploadBase64 } from "@/api/common";
import {
  GuidelineRegSign,
  GuidelineRegGetSignInfo,
  GuidelineRegCommonCompileSign,
  GuidelineRegCommonCompileGetSignInfo,
} from "@/api/guidelinereg";
import store from "@/store/index";
import EagleSingDiy from '../../../components/eagle-sing-diy.vue';
// import {  base64ToPath } from 'image-tools'

export default {
   components: { EagleSingDiy, EagleSingDiy },
  data() {
    return {
      showImg: false,
      imagePath:'',
      baseUrl:process.env.VUE_APP_BASE_API ,
      id: this.$route.query.IDS,
      TypeName: this.$route.query.TypeName,
      adds: "",
      zIndex: -8,
      isCertificate: true,
      isCertificate2: false,
      stageInfo: "",
      imgUrl: "",
      imgUrl2: "",
      imgUrl3: "",
      client: {},
      points: [],
      canvasTxt: null,
      startX: 0,
      startY: 0,
      moveY: 0,
      moveX: 0,
      endY: 0,
      endX: 0,
      w: null,
      h: null,
      isDown: false,
      isViewAutograph: this.$route.query.isViews > 0,
      contractSuccess: this.$route.query.contractSuccess,
    };
  },
  created() {
    if (this.TypeName == "GuidelineRegCommonCompile") {
      this.GuidelineRegCommonCompileGetSignInfo();
    } else if (this.TypeName == "GuidelineReg") {
      this.GuidelineRegGetSignInfo();
    }
     this.calcTitle()
  },
  
  mounted() {
    
    // let canvas = this.$refs.canvasF;
    // canvas.height = this.$refs.canvasHW.offsetHeight - 500;
    // canvas.width = this.$refs.canvasHW.offsetWidth - 50;
    // this.canvasTxt = canvas.getContext("2d");
    // this.canvasTxt.setClearColor(ff0045, 0.01);

			// this.canvasTxt.fillStyle="#ff0045"
      // this.canvasTxt.fillStyle = "#fff";
      //  this.canvasTxt.fillRect(0, 0, canvas.width, canvas.height);
   
//     var imageData = this.canvasTxt.getImageData(0, 0, canvas.width, canvas.height);   
// for(var i = 0; i < imageData.data.length; i += 4) {   
//     // 当该像素是透明的，则设置成白色   
//     if(imageData.data[i + 3] == 0) {   
//         imageData.data[i] = 255;   
//         imageData.data[i + 1] = 255;   
//         imageData.data[i + 2] = 255;   
//         imageData.data[i + 3] = 255;    
//     }   
// }   
// this.canvasTxt.putImageData(imageData, 0, 0); 
//  this.stageInfo = canvas.getBoundingClientRect();
  },
 
  methods: {
    preview(arry) {
      this.showImg = true;
      this.imagePath = arry;
    },
     childValClick(val){
            this.childVal2 = val;
        },
     FilePathClick(FilePath) {
       if (this.adds == "MarkSignAttach") {
        this.imgUrl = FilePath;
      } else if (this.adds == "AuditSignAttach") {
        this.imgUrl2 = FilePath;
      } else if (this.adds == "ApproveSignAttach") {
        this.imgUrl3 = FilePath;
      }
       console.log("http==========>"+FilePath);
    },
     empty(emptyStr){
     if (emptyStr == "MarkSignAttach") {
            this.imgUrl = '';
          } else if (emptyStr == "AuditSignAttach") {
            this.imgUrl2 = '';
          } else if (emptyStr == "ApproveSignAttach") {
            this.imgUrl3 = '';
     }
  },
    calcTitle() {
      let isSignature = this.$route.query.isSignature
      let title
      if(isSignature == "forSignature"){
          title = '安全生产制度汇编[签名]'
      }else if(isSignature == "isSignature"){
           title = '规章制度(程序)签名'
      }
      store.commit("updateTitle", title);
    },
    GuidelineRegCommonCompileGetSignInfo() {
      GuidelineRegCommonCompileGetSignInfo({ id: this.id }).then((res) => {
        this.imgUrl = res.data.MarkSignAttach;
        this.imgUrl2 = res.data.AuditSignAttach;
        this.imgUrl3 = res.data.ApproveSignAttach;
      });
    },
    GuidelineRegGetSignInfo() {
      GuidelineRegGetSignInfo({ id: this.id }).then((res) => {
        this.imgUrl = res.data.MarkSignAttach;
        this.imgUrl2 = res.data.AuditSignAttach;
        this.imgUrl3 = res.data.ApproveSignAttach;
      });
    },
    //保存或提交按钮
    onSubmit(bool) {
      // params.append('file', file.file)
      var data = {
        id: this.id,
        MarkSignAttach: this.imgUrl,
        AuditSignAttach: this.imgUrl2,
        ApproveSignAttach: this.imgUrl3,
        IsSubmit: bool,
      };
      if (this.TypeName == "GuidelineRegCommonCompile") {
        GuidelineRegCommonCompileSign(data)
          .then((res) => {
            this.$router.go(-3);
          })
          .catch((err) => {
            console.log("err", err);
          });
      } else if (this.TypeName == "GuidelineReg") {
        GuidelineRegSign(data)
          .then((res) => {
            this.$router.go(-3);
          })
          .catch((err) => {
            console.log("err", err);
          });
      }
    },

    AddCertificate(add) {
      this.adds = add;
      this.zIndex = 8;
      this.isCertificate = true;
      this.isCertificate2 = true;
      this.$refs.setzIndex.setzIndex(this.zIndex);
      // this.overwrite();
    },
    Canvas_goBack() {
      this.zIndex = -8;
      this.isCertificate = false;
      this.isCertificate2 = false;
    },
    //mobile
    touchStart(ev) {
      ev = ev || event;
      ev.preventDefault();
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clienX,
          y: ev.targetTouches[0].clientY,
        };
        this.startX = obj.x;
        this.startY = obj.y;
        this.canvasTxt.beginPath();
        this.canvasTxt.moveTo(this.startX, this.startY);
        this.canvasTxt.lineTo(obj.x, obj.y);
        this.canvasTxt.stroke();
        this.canvasTxt.closePath();
        this.points.push(obj);
      }
    },
    touchMove(ev) {
      ev = ev || event;
      ev.preventDefault();
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clientX - this.stageInfo.left,
          y: ev.targetTouches[0].clientY - this.stageInfo.top,
        };
        this.moveY = obj.y;
        this.moveX = obj.x;
        this.canvasTxt.beginPath();
        this.canvasTxt.moveTo(this.startX, this.startY);
        this.canvasTxt.lineTo(obj.x, obj.y);
        this.canvasTxt.stroke();
        this.canvasTxt.closePath();
        this.startY = obj.y;
        this.startX = obj.x;
        this.points.push(obj);
      }
    },
    touchEnd(ev) {
      ev = ev || event;
      ev.preventDefault();
      if (ev.touches.length == 1) {
        let obj = {
          x: ev.targetTouches[0].clientX - this.stageInfo.left,
          y: ev.targetTouches[0].clientY - this.stageInfo.top,
        };
        this.canvasTxt.beginPath();
        this.canvasTxt.moveTo(this.startX, this.startY);
        this.canvasTxt.lineTo(obj.x, obj.y);
        this.canvasTxt.stroke();
        this.canvasTxt.closePath();
        this.points.push(obj);
      }
    },
    //pc
    mouseDown(ev) {
      ev = ev || event;
      ev.preventDefault();
      if (1) {
        let obj = {
          x: ev.offsetX,
          y: ev.offsetY,
        };
        this.startX = obj.x;
        this.startY = obj.y;
        this.canvasTxt.beginPath();
        this.canvasTxt.moveTo(this.startX, this.startY);
        this.canvasTxt.lineTo(obj.x, obj.y);
        this.canvasTxt.stroke();
        this.canvasTxt.closePath();
        this.points.push(obj);
        this.isDown = true;
      }
    },
    mouseMove(ev) {
      ev = ev || event;
      ev.preventDefault();
      if (this.isDown) {
        let obj = {
          x: ev.offsetX,
          y: ev.offsetY,
        };
        this.moveY = obj.y;
        this.moveX = obj.x;
        this.canvasTxt.beginPath();
        this.canvasTxt.moveTo(this.startX, this.startY);
        this.canvasTxt.lineTo(obj.x, obj.y);
        this.canvasTxt.stroke();
        this.canvasTxt.closePath();
        this.startY = obj.y;
        this.startX = obj.x;
        this.points.push(obj);
      }
    },
    mouseUp(ev) {
      ev = ev || event;
      ev.preventDefault();
      if (1) {
        let obj = {
          x: ev.offsetX,
          y: ev.offsetY,
        };
        this.canvasTxt.beginPath();
        this.canvasTxt.moveTo(this.startX, this.startY);
        this.canvasTxt.lineTo(obj.x, obj.y);
        this.canvasTxt.stroke();
        this.canvasTxt.closePath();
        this.points.push(obj);
        this.points.push({ x: -1, y: -1 });
        this.isDown = false;
      }
    },
    //重写
    overwrite() {
      this.canvasTxt.clearRect(
        0,
        0,
        this.$refs.canvasF.width,
        this.$refs.canvasF.height
      );
      this.points = [];
    },
    // 上传图片
    afterRead(base64) {
      var params = {
        Img: base64,
      };
      CommonAttachUploadBase64(params)
        .then((res) => {
          if (this.adds == "MarkSignAttach") {
            this.imgUrl = res.data.FilePath;
          } else if (this.adds == "AuditSignAttach") {
            this.imgUrl2 = res.data.FilePath;
          } else if (this.adds == "ApproveSignAttach") {
            this.imgUrl3 = res.data.FilePath;
          }
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
    //提交签名
    commit() {
      if (this.adds == "MarkSignAttach") {
        this.imgUrl = this.$refs.canvasF.toDataURL();
      } else if (this.adds == "AuditSignAttach") {
        this.imgUrl2 = this.$refs.canvasF.toDataURL();
      } else if (this.adds == "ApproveSignAttach") {
        this.imgUrl3 = this.$refs.canvasF.toDataURL();
      }
      this.afterRead(this.$refs.canvasF.toDataURL());
      this.zIndex = -8;
    },
  },
};
</script>

<style scoped>
.imageShow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.user-info {
  min-height:  calc(100vh - 40px);
  background-color: #fff;
}
.imgCanvas {
  /* background-color: #71b900; */
  border: 1px solid #7d7d7d;
  width: 50px;
  height: 50px;
}
.btnBox {
  padding: 10px;
  text-align: center;
}
.btnBox button:first-of-type {
  background: transparent;
  border-radius: 4px;
  height: 40px;
  width: 80px;
  font-size: 14px;
}
.btnBox button:last-of-type {
  background: #71b900;
  color: #fff;
  border-radius: 4px;
  height: 40px;
  width: 80px;
  font-size: 14px;
}
.van-image {
    background: #fff  !important;
}
</style>